*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
.box{
    width: 1349px;
    height: 1200px;
    background-color: white;
    margin: 0px auto;
}
.head{
    width: 1349px;
    height: 134px;
   /* outline: 2px solid black;*/
    position: relative;
    animation: move11 6s ease forwards;
    overflow: hidden;
}
@keyframes move11{

    from{
        width: 10px;
    }
to{
    width: 1349px;
}


}
.head_logo{
    width: 200px;
    height: 200px;
    background: url("../img/vivo.png");
    float: left;
    position: absolute;
    left: 85px;
}
.head_nav> ul{
    width: 900px;
    height: 55px ;
    /*    outline: 1px solid red;*/
    float: left;
    position: absolute;
    left: 270px;
    top: 75px;
}
.head_nav li{
    width: 100px;
    height: 55px;
    float: left;
    text-align: center;
    /* outline: 1px solid black;*/
    line-height: 56px;
    font-size: 15px;
    font-weight: 700;
    color: dodgerblue;
}
.nav>li:hover{
    border-bottom:5px solid dodgerblue;
    color: rgb(0, 0, 0);
}


/*head is over body is begin*/


.body   {
    width: 100%;
    height: 817px;
    /*outline: 3px solid red;*/
    position: relative;
}
.left{
    width: 556px;
    height: 569px;
    outline: 3px solid rgba(0, 0, 255, 0.35);
    position: absolute;
    left: 124px;
    top: 95px;
    background: url("../img/30.jpg");
    animation: move08 2s ease infinite;
}
@keyframes move08 {
    0%{
        background: url("../img/30.jpg");
    }
    100%{
        background: url("../img/42.jpg");
    }
    
}
.right{
    width: 441px;
    height: 459px;
   /* outline: 3px solid #000000;*/
    position: relative;
    top: 140px;
    right: -708px;
}
.right> h1{
    font-family:fantasy;
    position: absolute;
    left: 41px;
    top: 12px;
    height: 50px;
}
.right> h2{
    color: red;
    position: absolute;
    top: 220px ;
    left: 110px;
    font-size: 20px;
    animation: move01 0.5s ease infinite;
}
@keyframes move01 {
    from{
        transform: scale(1)
    }
    to{
        transform: scale(1.5)
    }
}
.right> p{
    color: dodgerblue;
    font-size:20px;
    position: absolute;
    left: 54px;
    top: 86px;
    transition: all 0.5s ease;
}
.btn{
    width: 70px;
    height: 50px;
    border-radius: 50px;
    /*width: 100px;
    height: 50px;
    border-radius: 25px;*/
    background-color:red;
    text-align: center;
    position: absolute;
    left: 170px;
    bottom: 16px;
    line-height: 50px;
    transition: all 0.5s ease;
}
.btn:hover{
    width: 100px;
    height: 50px;
    border-radius: 25px;
    transform: scale(0.8);
    box-shadow: 1px 1px 50px 5px #ff1822;
}
.ver{
    width: 120px;
    height: 60px;
    border: 2px solid rgba(9, 4, 5, 0.16);
    float: left;
    position: relative;
    top: 291px;
    margin-left: 18px;
}
.ver> p{
    color:rgba(9, 4, 5, 0.16) ;
    text-align: center;
    line-height: 27px;

}
.ver> p:hover{
    color: black;
}
.ver:hover{
    border: 2px solid black;

}
.cat{
    width: 524px;
    height:188px;
    position: absolute;
    left: 125px;
    bottom: -406px;
    overflow: hidden;
}
.cat_son{
    width: 900px;
    height: 188px;
    float: left;
    margin-left: -7px;
    animation: move05 6s linear infinite;
   /* outline: 3px solid brown;*/
}
@keyframes move05{

    from{
        margin-left: -7px;
    }
to{
    margin-left: -400px;
}


}
.sm{
    width: 80px;
    height: 188px;
    float: left;
    /*outline: 1px solid black;*/
    position: relative;
    bottom: 10px;
    margin-left: 10px;
}